<template>
  <div>
    <el-table
        :data="lags.filter(data => !search || data.primaryPort.toLowerCase().includes(search.toLowerCase())
      || data.currentUsingPort.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-cell-style="headerCellClass"
        highlight-current-row>
      <el-table-column
          label="ID"
          sortable
          width="60"
          prop="lagId">
      </el-table-column>
      <el-table-column
          label="保护名称"
          prop="name">
      </el-table-column>
      <el-table-column
          label="保护端口"
          prop="lagPort">
        <template slot-scope="scope">
          <span v-for="(i,key) in scope.row.lagPort" :key="key">
            <span>{{ i }}</span>
            <!--              <el-divider direction="vertical" v-if="key!==scope.row.lagPort.length-1"></el-divider>-->
              <br v-if="key!==scope.row.lagPort.length-1">
          </span>
        </template>
      </el-table-column>
      <el-table-column
          label="模式"
          prop="lagMode">
      </el-table-column>
      <el-table-column
          label="状态"
          width="80"
          prop="status">
      </el-table-column>
      <el-table-column
          label="保护策略"
          prop="lagPolicy">
      </el-table-column>
      <el-table-column
          label="协商方式"
          prop="lacpMode">
      </el-table-column>
      <el-table-column
          label="延迟倒换时间(ms)"
          width="150"
          prop="holdOff">
      </el-table-column>
      <el-table-column
          label="返回模式"
          width="80"
          prop="reversionMode">
      </el-table-column>
      <el-table-column
          label="WTR(s)"
          width="80"
          prop="waiteToRestoreTime">
      </el-table-column>
      <el-table-column
          label="主用端口"
          prop="primaryPort">
      </el-table-column>
      <el-table-column
          label="工作端口"
          prop="currentUsingPort">
      </el-table-column>
      <el-table-column
          label="FTP 端口"
          prop="ftpPortName">
      </el-table-column>
      <el-table-column
          align="right" width="210">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入端口关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>

          <el-button slot="reference" size="mini" type="danger"
                     @click="handleDelete(scope.$index, lags)">删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <div style="float: right;margin-right: 0px">
      <el-button type="primary" @click="createValue = true">新建</el-button>
      <el-button type="success">刷新</el-button>
    </div>

    <el-dialog
        :visible.sync="changeValue"
        :show-close="false"
        width="400px"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">LAG保护修改</div>
      </div>
      <el-form :model="lag" label-width="100px" class="config_form">
        <el-form-item label="保护名称" prop="name">
          <el-input v-model="lag.name"></el-input>
        </el-form-item>
        <el-form-item label="模式" prop="lagMode">
          <el-select v-model="lag.lagMode" clearable placeholder="请选择模式">
            <el-option value="sharing"></el-option>
            <el-option value="nonSharing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="保护策略" prop="secondaryPort">
          <el-select v-model="lag.lagPolicy" clearable placeholder="请选择备用端口">
            <el-option label="源MAC" value="sourceMAC"></el-option>
            <el-option label="目的MAC" value="destMAC"></el-option>
            <el-option label="源IP" value="sourceIp"></el-option>
            <el-option label="目的IP" value="destIp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协商方式" prop="lagMode">
          <el-select v-model="lag.lacpMode" clearable placeholder="请选择协商方式">
            <el-option label="手动" value="Manual"></el-option>
            <el-option label="静态" value="Static"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="延迟时间" prop="holdOffTime">
          <el-input v-model="lag.holdOff" placeholder="延迟倒换时间，单位 ms">
            <i slot="suffix" style="margin-right: 10px">ms</i>
          </el-input>
        </el-form-item>

        <el-form-item label="返回模式" prop="mode">
          <el-select v-model="lag['reversion-mode']" clearable placeholder="请选择返回模式，默认返回">
            <el-option label="返回" value="返回"></el-option>
            <el-option label="非返回" value="非返回"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="WTR" prop="waitToRestoreTime">
          <el-input v-model="lag.waiteToRestoreTime">
            <i slot="suffix" style="margin-right: 10px">s</i>
          </el-input>
        </el-form-item>
        <el-form-item label="主用端口" prop="primaryPort">

          <el-select v-model="lag.primaryPort" clearable placeholder="请选择主用端口">
            <el-option value="端口1"></el-option>
            <el-option value="端口2"></el-option>
            <el-option value="端口3"></el-option>
            <el-option value="端口4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="changeValue = false" style="float: right;margin: 0 10px">取消</el-button>
          <el-button type="primary" @click="submit" style="float: right;margin: 0 10px">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
        :visible.sync="createValue"
        :show-close="false"
        width="400px"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">新建LAG保护</div>
      </div>
      <el-form :model="lag" label-width="100px" class="config_form">
        <el-form-item label="保护名称" prop="name">
          <el-input v-model="lag.name"></el-input>
        </el-form-item>
        <el-form-item label="模式" prop="lagMode">
          <el-select v-model="lag.lagMode" clearable placeholder="请选择模式">
            <el-option value="sharing"></el-option>
            <el-option value="nonSharing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="保护策略" prop="secondaryPort">
          <el-select v-model="lag.lagPolicy" clearable placeholder="请选择备用端口">
            <el-option label="源MAC" value="sourceMAC"></el-option>
            <el-option label="目的MAC" value="destMAC"></el-option>
            <el-option label="源IP" value="sourceIp"></el-option>
            <el-option label="目的IP" value="destIp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协商方式" prop="lagMode">
          <el-select v-model="lag.lacpMode" clearable placeholder="请选择协商方式">
            <el-option label="手动" value="Manual"></el-option>
            <el-option label="静态" value="Static"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="延迟时间" prop="holdOffTime">
          <el-input v-model="lag.holdOff" placeholder="延迟倒换时间，单位 ms">
            <i slot="suffix" style="margin-right: 10px">ms</i>
          </el-input>
        </el-form-item>

        <el-form-item label="返回模式" prop="mode">
          <el-select v-model="lag['reversion-mode']" clearable placeholder="请选择返回模式，默认返回">
            <el-option label="返回" value="返回"></el-option>
            <el-option label="非返回" value="非返回"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="WTR" prop="waitToRestoreTime">
          <el-input v-model="lag.waiteToRestoreTime">
            <i slot="suffix" style="margin-right: 10px">s</i>
          </el-input>
        </el-form-item>
        <el-form-item label="主用端口" prop="primaryPort">

          <el-select v-model="lag.primaryPort" clearable placeholder="请选择主用端口">
            <el-option value="端口1"></el-option>
            <el-option value="端口2"></el-option>
            <el-option value="端口3"></el-option>
            <el-option value="端口4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="createValue = false" style="float: right;margin: 0 10px">取消</el-button>
          <el-button type="primary" @click="submit" style="float: right;margin: 0 10px">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "LAG",
  data() {
    return {

      search: '',
      changeValue: false,
      createValue: false,

      lags: [
        {
          lagId: 1,
          name: 'lag1',
          lagPort: ['端口1', '端口2', '端口3', '端口4',],
          lagMode: 'nonSharing',
          lagPolicy: 'sourceMac',
          lacpMode: 'Manual',
          status: 'up',
          holdOff: '50',
          reversionMode: '返回',
          waiteToRestoreTime: 300,
          primaryPort: '端口1',
          currentUsingPort: '端口1',
          ftpPortName: 'FTP=1',
        },
        {
          lagId: 2,
          name: 'lag2',
          lagPort: ['端口3', '端口4',],
          lagMode: 'nonSharing',
          lagPolicy: 'sourceMac',
          lacpMode: 'Manual',
          status: 'up',
          holdOff: '50',
          reversionMode: '返回',
          waiteToRestoreTime: 300,
          primaryPort: '端口4',
          currentUsingPort: '端口4',
          ftpPortName: 'FTP=1',
        },
        {
          lagId: 3,
          name: 'lag3',
          lagPort: ['端口6', '端口7', '端口8'],
          lagMode: 'nonSharing',
          lagPolicy: 'sourceMac',
          lacpMode: 'Manual',
          status: 'up',
          holdOff: '50',
          reversionMode: '返回',
          waiteToRestoreTime: 300,
          primaryPort: '端口6',
          currentUsingPort: '端口7',
          ftpPortName: 'FTP=1',
        },
        {
          lagId: 4,
          name: 'lag4',
          lagPort: ['端口5', '端口7', '端口8', '端口9',],
          lagMode: 'nonSharing',
          lagPolicy: 'sourceMac',
          lacpMode: 'Manual',
          status: 'up',
          holdOff: '50',
          reversionMode: '返回',
          waiteToRestoreTime: 300,
          primaryPort: '端口8',
          currentUsingPort: '端口5',
          ftpPortName: 'FTP=1',
        },
      ],

      temp_row: '',
      lag: {
        lagId: 1,
        name: 'lag1',
        lagPort: ['端口1', '端口2', '端口3', '端口4',],
        lagMode: 'nonSharing',
        lagPolicy: 'sourceMac',
        lacpMode: 'Manual',
        status: 'up',
        holdOff: '50',
        reversionMode: '返回',
        waiteToRestoreTime: 300,
        primaryPort: '端口1',
        currentUsingPort: '端口1',
        ftpPortName: 'FTP=1',
      },

    }
  },
  methods: {
    open() {
      this.$confirm('此操作将永久删除该保护组, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index, row) {
      this.lag = row;
      this.changeValue = true;
      console.log(index, row);
      this.temp_row = index;
    },
    submit() {

      this.lags[this.temp_row] = this.lag;

      this.changeValue = false;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除【id= ' + row[index].lagId + '】的保护组, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
            row.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

      console.log(index, row);
    },

    cellStyle({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0 && columnIndex === 2) { //指定坐标rowIndex ：行，columnIndex ：列
        return 'background:#fff' //rgb(105,0,7)
      } else {
        return ''
      }
    },
    headerCellClass({row, rowIndex}) {

    },
  }
}
</script>

<style scoped>

</style>